<template>
	<view class="_flex-y _abs-ct-two win-box _cart" :class="{ 'win-box-full': isFull }" ref="win-box">
		<view class="_flex _background-1 _wrapper-x _p5 _over-hidden" ref="win-box-title">
			<view class="title">{{title}}</view>
			<view class="_flex _flex-space-x">
				<view @click="$emit('hidden')"><el-icon><Minus /></el-icon></view>
				<view @click="isFull = !isFull"><el-icon :class="{ 'active': isFull }"><FullScreen /></el-icon></view>
				<view @click="$emit('close')"><el-icon><Close /></el-icon></view>
			</view>
		</view>
		<view class="_flex-item-1 _wrapper" style="height: 500px;">
			<div class="_wrapper _box-scroll _over-scroll-hidden">
				<template v-if="cusComponent">
					<component :is="cusComponent" ref="cusComponent" />
				</template>
				<template v-else>
					找不到对应功能，请重新尝试或者联系管理员！
				</template>
			</div>
		</view>
	</view>
	<!--

		<view>

		</view>
	 -->
</template>

<script>
	import toolDrag from '@/tool/tool-drag';
	import { markRaw } from "vue";

	export default {
		props: {
			title: {
				type: String,
				default: "窗口"
			},
			cusComponent: {
				type: Object,
				default: undefined
			}
		},
		computed: {
			componentComputed() {
				return markRaw(this.cusComponent);
			}
		},
		data() {
			return {
				isFull: true
			}
		},
		mounted() {
			toolDrag.drag(this.$refs["win-box-title"].$el, {
				target: this.$refs["win-box"].$el
			})
		}
	}
</script>

<style scoped>
	.win-box {
		width: 70%;
		height: 70%;
		overflow: hidden;
	}
	.win-box-full {
		width: 100%;
		height: 100%;
	}
	.title {
		color: #fff;
	}
	.active {
		color: aqua;
	}
</style>